<template>
  <div class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="评价律师" />
    <div class="feedback">
      <div class="line"></div>
      <div class="lawyer">
        <!-- 是否关注 -->
        <div class="gaunzhu" v-if="lawyer.lawyer_status">已关注</div>
        <image class="avatar" :src="lawyer.avatar" mode="widthFix" />
        <div class="name">{{lawyer.reply_realname}}</div>
        <div class="company">{{lawyer.affiliated_company}}</div>
        <div class="goodat">擅长：{{lawyer.gh_text}}</div>
        <div class="pingfen">
          <text>描述相符</text>
          <div class="rate">
            <!-- 评分组件 -->
            <uni-rate :value="rate" size="15" active-color="#fea388" margin="5" @change="handleRate"></uni-rate>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="main box">
        <div class="title">您的评价很宝贵</div>
        <div class="text-box">
          <textarea
            class="textarea"
            v-model="inputContent"
            :maxlength="maxlength"
            placeholder="请在此输入您的评价..."
          />
          <text class="input-num">{{inputLength}}/{{maxlength}}</text>
        </div>
      </div>
      <div class="line"></div>
      <div class="header box">
        <div class="title">您的评价能帮助到其他用户哦</div>
        <div class="tag">
          <div
            class="tag-item"
            :class="{active: item.active}"
            v-for="(item, index) in tagList"
            :key="index"
            @click="handleChooseTag(item)"
          >{{item.tag}}</div>
        </div>
        <div class="submit" @click="handleSubmit">提交</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tagList: [],
      activeIndex: 0,
      rate: 0,
      inputContent: "",
      maxlength: 300,
      lawyer: null
    };
  },
  computed: {
    inputLength() {
      return this.inputContent.length;
    }
  },
  async onLoad(e) {
    const that = this;
    this.orderid = e.orderid; // 订单id
    this.hid = e.id || ''; // 回复留言id
    this.lawyer_id = e.lawyerid || '' // 律师id
    this.type = e.type // 服务类型  0公开咨询  1付费  2一对一
    const res = await this.$gh
      .request("member.order", {
        data: {
          op: "getEvaluate",
          orderid: this.orderid,
          hid: this.hid,
          lawyer_id: this.lawyer_id,
          service_type: this.type
        }
      })
      .catch(err => {
        if (err.code == 41009) {
          that.$store.dispatch("login", err.message);
        }
      });
    this.$print(res.data.list)
    this.tagList = res.data.list.label;
    this.lawyer = res.data.list.lawyer;
    let arr = this.lawyer.main_category
    // 超过3个大分类显示...  差点被难倒
    if(arr.length > 3){
      arr.length = 3
      arr[2] = arr[2]+'...'
    }
    this.lawyer.gh_text = arr.join('、')
  },
  methods: {
    async handleSubmit() {
      if (this.rate == 0) {
        uni.showToast({
          mask: true,
          icon: "none",
          title: "请先评分再提交",
          duration: 2000
        });
        return;
      }
      const labelTemp = this.tagList.filter(element => {
        return element.active;
      });
      const label = labelTemp.map(element => element.tag);
      const res = await this.$gh.request("member.order", {
        data: {
          op: "editOrderEvaluate",
          orderid: this.orderid,
          service_type: this.type,
          hid: this.hid,
          score: this.rate,
          score_content: this.inputContent,
          label
        }
      });
      if (res.code == 200) {
        uni.showToast({
          mask: true,
          icon: "success",
          title: "提交成功",
          duration: 2000
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 2
          });
        }, 2000);
      }
    },
    handleRate(e) {
      this.rate = e.value;
    },
    handleChooseTag(item) {
      const labelTemp = this.tagList.filter(element => {
        return element.active;
      });
      if(labelTemp.length === 3 && !item.active) {
        uni.showToast({
          mask: true,
          icon: 'none',
          title: '最多选择3个标签',
          duration: 2000
        });
        return
      }
      item.active = !item.active;
    }
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.feedback {
  min-height: 100vh;
  background-color: #fff;
  /deep/.textarea-placeholder {
    font-size: 26rpx;
    color: @font-color;
  }
  .line {
    height: 20rpx;
    background-color: #f9faff;
  }
  .title {
    font-size: 30rpx;
    color: @deep-color;
    margin-bottom: 25rpx;
    padding-bottom: 25rpx;
    border-bottom: 1px solid #eee;
  }
  .box {
    padding: 25rpx;
    background-color: #fff;
    margin: 10rpx 0;
  }
  .lawyer {
    position: relative;
    text-align: center;
    font-size: 26rpx;
    color: @font-color;
    background-color: #fff;
    padding-top: 20rpx;
    .gaunzhu{
      position: absolute;
      top: 36rpx;
      right: 0;
      padding: 5rpx 10rpx 5rpx 20rpx;
      border-top-left-radius: 25rpx;
      border-bottom-left-radius: 25rpx;
      background-color: #FEA388;
      font-size: 26rpx;
      color: #fff;
    }
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
    .name {
      font-size: 36rpx;
      color: @deep-color;
    }
    .company {
      margin: 10rpx 0;
    }
    .pingfen {
      .gh-center();
      padding: 20rpx 0;
      border-top: 1px solid #eee;
      margin-top: 20rpx;
      text {
        color: @deep-color;
      }
      .rate {
        margin-top: 10rpx;
      }
    }
  }
  .header {
    .tag {
      .flex();
      flex-wrap: wrap;
      .tag-item {
        padding: 5rpx 10rpx;
        margin-bottom: 10rpx;
        border: 1px solid @font-color;
        font-size: 26rpx;
        margin-right: 10rpx;
        color: @font-color;
      }
      .active {
        border: 1px solid #849aff;
        color: #849aff;
      }
    }
  }
  .main {
    .text-box {
      position: relative;
      .textarea {
        width: 100%;
        height: 280rpx;
        padding-bottom: 23rpx;
        font-size: 26rpx;
        // margin-bottom: 35rpx;
      }
      .input-num {
        position: absolute;
        bottom: 25rpx;
        right: 25rpx;
        font-size: 24rpx;
        color: @font-color;
      }
    }
  }
  .submit {
    width: 620rpx;
    margin: 45rpx auto;
    padding: 15rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: @theme-color;
  }
}
</style>